<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>  
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set> 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Tables - Ace Admin</title>
		
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-ui.js"></script>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/jquery-ui.css">
		<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
		 
		<script type="text/javascript">	
		$(function(){
			
			$('.sel').click(function(){
				var seltType = $('#selType option:selected').val();
				var selContext = '';
				
				if(seltType == '考试日期'){
					var selContext1 = $('#selContext1').val();
					var selContext2 = $('#selContext2').val();
					
					selContext = selContext1 + ',' + selContext2;
					
				}else{
					selContext = $('#selContext').val();
				}
				
				if(selContext != ''){
					$.ajax({
						type: 'POST',
						url: '${contextPath}/teacher/select',
						data: {
							selContext: selContext,
							seltType:seltType
							},
						dataType: "json",
						success: function(data){
									if(data.success){
										var htmlString = "";
										$.each(data.ScoreListBySel,function(index,item){
											htmlString += "<tr>";
											htmlString += "<td>" + item.userId + "</td>";
											htmlString += "<td>" + item.userName + "</td>";
											htmlString += "<td>" + item.subjectName + "</td>";
											htmlString += "<td>" + item.examTimeString + "</td>";
											htmlString += "<td>" + item.score + "</td>";
											htmlString +="</tr>";
										})
										$('#tbody').html(htmlString);			
									}else{
										alert("没有找到");
									}													
								}
						});
				}else{
					alert("查询内容不能为空");
				}
			})
			
			$("#selType").change(function(){
				if($('#selType option:selected').val() == '考试日期'){
					var htmlInput = '<input id="selContext1" class="selContext1" type="text" style="height:30px"/>—<input id="selContext2" type="text" style="height:30px"/>';
					$("#dateInput").html(htmlInput);
				}else{
					var htmlInput = '<input id="selContext" type="text" style="height:30px"/>';
					$("#dateInput").html(htmlInput);
				}
			})
			
			$(document).on("mousemove","#selContext1,#selContext2",function(){
				$(this).datepicker({
					dateFormat:"yy-mm-dd"
				});
			})
			
			
			
			
		});
		</script>
		
	</head>

<body class="no-skin">
	<!-- /section:settings.box -->
	<div class="page-content-area">	
		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
				<div class="row">
					<div class="col-xs-12">				
					查询条件：<select id="selType">
								<option>科目</option>
								<option>学号</option>
								<option>姓名</option>
								<option>考试日期</option>
							</select>
							<span id="dateInput">
							<input id="selContext" type="text" style="height:30px"/>
							</span>
							<a title="查询成绩" class="btn btn-primary btn-sm sel"><i class="ace-icon fa fa-search"></i></a>


						<table id="sample-table-1" class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>学号</th>
									<th>姓名</th>
									<th>科目</th>
									<th>考试日期</th>
									<th>分数</th>
								</tr>
							</thead>
	
							<tbody id="tbody">
							<c:forEach items="${ScoreList }" var="score">
								<tr>
									<td>${score.userId }</td>
									<td>${score.userName }</td>
									<td>${score.subjectName }</td>
									<td>${score.examTimeString }</td>
									<td>${score.score }</td>
								</tr>
							</c:forEach>
							</tbody>
							</table>
						</div>
					</div>
				</div>

				<div id="modal-table" class="modal fade" tabindex="-1">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header no-padding">
								<div class="table-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
										<span class="white">&times;</span>
									</button>
									Results for "Latest Registered Domains
								</div>
							</div>
	
							<div class="modal-body no-padding">
								<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
									<thead>
										<tr>
											<th>Domain</th>
											<th>Price</th>
											<th>Clicks</th>
	
											<th>
												<i class="ace-icon fa fa-clock-o bigger-110"></i>
												Update
											</th>
										</tr>
									</thead>
	
									<tbody>
										<tr>
											<td>
												<a href="#">ace.com</a>
											</td>
											<td>$45</td>
											<td>3,330</td>
											<td>Feb 12</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">base.com</a>
											</td>
											<td>$35</td>
											<td>2,595</td>
											<td>Feb 18</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">max.com</a>
											</td>
											<td>$60</td>
											<td>4,400</td>
											<td>Mar 11</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">best.com</a>
											</td>
											<td>$75</td>
											<td>6,500</td>
											<td>Apr 03</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">pro.com</a>
											</td>
											<td>$55</td>
											<td>4,250</td>
											<td>Jan 21</td>
										</tr>
									</tbody>
								</table>
							</div>
	
							<div class="modal-footer no-margin-top">
								<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
									<i class="ace-icon fa fa-times"></i>
									Close
								</button>
	
								<ul class="pagination pull-right no-margin">
									<li class="prev disabled">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-left"></i>
										</a>
									</li>
	
									<li class="active">
										<a href="#">1</a>
									</li>
	
									<li>
										<a href="#">2</a>
									</li>
	
									<li>
										<a href="#">3</a>
									</li>
	
									<li class="next">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-right"></i>
										</a>
									</li>
								</ul>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- PAGE CONTENT ENDS -->
			</div><!-- /.col -->
		</div><!-- /.row -->
	</body>
</html>